<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    /*
      GLSL（OpenGL Shading Language）是一种用于编写图形着色器的编程语言。
      着色器是用于在图形处理单元（GPU）上执行特定图形处理任务的程序。通俗讲，着色器是画点的工具，一个图形是由无数个点组成的，每个点都有其自己的颜色。

      着色器的类型
        一个着色器就是一个绘制东西到屏幕上的函数，着色器有顶点着色器和片段着色器
        顶点着色器：处理每个顶点的属性，如位置、法线、纹理坐标等。它的主要任务是将顶点从对象坐标系转换到屏幕坐标系，并传递其他顶点属性给片段着色器。
        片段着色器：处理每个像素的颜色。它接收来自顶点着色器插值后的数据，并最终决定每个像素的颜色。
    */

    /*
    着色器的语法
      在HTML中，如果你想把着色器代码直接写在 < script > 标签中，通常会使用自定义的MIME类型，以避免浏览器将其作为常规JavaScript代码执行。
      常见的做法是将type属性设置为一个非标准类型，例如x - shader / x - vertex和x - shader / x - fragment，分别用于顶点着色器和片段着色器。
      这样做的好处是可以通过JavaScript获取和解析着色器代码。

      // 顶点着色器
      // <s id = "vertex-shader" type = "x-shader/x-vertex" ></s>
      // 片段着色器
      // <s id="fragment-shader" type="x-shader/x-fragment"></s>

      也可以写在代码里，字符串模板里
    */

    /*
    数据类型：​
      基本数据类型：float, int, bool​
      向量类型：vec2, vec3, vec4（浮点型）；ivec2, ivec3, ivec4（整数型）；bvec2, bvec3, bvec4（布尔型）​
      矩阵类型：mat2, mat3, mat4​
      采样器类型：sampler2D, samplerCube（用于纹理采样）
    变量修饰符：
      用于指定变量的作用域、生命周期和用途。不同的修饰符在顶点着色器和片段着色器中起到不同的作用。  ​
      attribute：用于顶点着色器，定义从顶点缓冲区传入的变量（仅在顶点着色器中使用）。​
      uniform：定义在整个渲染过程中保持不变的变量，常用于传递变换矩阵、光照参数等。​
      varying：用于在顶点着色器和片段着色器之间传递插值数据。
    内置变量：
      顶点着色器内置变量：​
        gl_Position顶点的变换后位置​
        gl_PointSize大小
      片段着色器内置变量：
        gl_FragColor：片段的最终颜色。​
    函数：
      常用数学函数：sin, cos, tan, pow, exp, log, sqrt, abs, min, max，radians​
      向量函数：dot, cross, normalize, length, distance​
      纹理采样函数：texture2D, textureCube​
    定义精度：precision 关键字用于声明变量的默认精度。
    GLSL 支持三种不同的精度修饰符：​
      highp（高精度）：通常用32位表示，适用于需要高精度的计算，如位置计算、复杂的物理效果等。​
      mediump（中精度）：通常用16位表示，适用于需要中等精度但不需要高精度的计算，如纹理坐标。​
      lowp（低精度）：通常用10位表示，适用于对精度要求最低的计算，如颜色值。
    主函数：着色器必须要有一个主函数void main()，它是入口
    */
  </script>
</body>
</html>